<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/myplugs/css/portal.css">
    <link rel="stylesheet" href="/myplugs/css/mycss.css">
    <link rel="stylesheet" href="/myplugs/css/floating_window.css">
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <div class="row g-3 mb-4 align-items-center justify-content-between">
                <div class="col-auto">
                    <a class="app-page-title mb-0">用户管理</a>
                </div>
                <div class="col-auto">
                    <div class="page-utilities">
                        <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                            <div class="col-auto">
                                <form class="table-search-form row gx-1 align-items-center" action="/Accounts/selectUserInf" method="get">
                                    <div class="col-auto">
                                        <input type="text" id="search-userInf" name="search" class="form-control search-orders" placeholder="请输入待搜索内容">
                                    </div>
                                    <div class="col-auto">
                                        <button type="submit" class="btn app-btn-secondary">搜索</button>
                                    </div>
                                </form>
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//table-utilities-->
                </div><!--//col-auto-->
            </div><!--//row-->
            <div class="tab-content" id="orders-table-tab-content">
                <div class="tab-pane fade show active" id="orders-all" role="tabpanel" aria-labelledby="orders-all-tab">
                    <div class="app-card app-card-orders-table shadow-sm mb-5">
                        <div class="app-card-body">
                            <div class="table-responsive">
                                <table class="table app-table-hover mb-0 text-left">
                                    <thead>
                                    <tr>
                                        <th class="cell">用户名</th>   <!--                                    <th class="cell">密码</th>-->
                                        <th class="cell">邮箱</th>
                                        <th class="cell">姓名</th>
                                        <th class="cell">第一地址</th>
                                        <th class="cell">第二地址</th>
                                        <th class="cell">电话号码</th>
                                        <th class="cell"></th>
                                        <th class="cell"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="Account:${Account}">
                                        <td class="cell" th:text="${Account.userid}" id="AccountUserId"></td>
                                        <td class="cell" th:text="${Account.email!=null}?${Account.email}:'邮箱未知'"></td>
                                        <td class="cell" th:text="${Account.firstName+Account.lastName!=null}?${Account.firstName+' '+Account.lastName}:'小明'"></td>
                                        <td class="cell"><span class="badge bg-success" th:text="${Account.address1!=null}?${Account.address1}:'地址未知'"></span></td>
                                        <td class="cell"><span class="badge bg-warning" th:text="${Account.address2!=null}?${Account.address2}:'地址未知'"></span></td>
                                        <td class="cell" th:text="${Account.phone}"></td>
                                        <td class="cell"><a class="btn-sm app-btn-primary inf1">重置密码</a></td>
                                        <td class="cell"><a class="btn-sm app-btn-secondary inf" onclick="showPopup()">编辑信息</a></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div><!--//table-responsive-->
                        </div><!--//app-card-body-->
                    </div><!--//app-card-->
<!--                    <nav class="app-pagination">-->
<!--                        <ul class="pagination justify-content-center">-->
<!--                            <li class="page-item disabled">-->
<!--                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>-->
<!--                            </li>-->
<!--                            <li class="page-item active"><a class="page-link" href="#">1</a></li>-->
<!--                            <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                            <li class="page-item"><a class="page-link" href="#">3</a></li>-->
<!--                            <li class="page-item">-->
<!--                                <a class="page-link" href="#">下一页</a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </nav>&lt;!&ndash;//app-pagination&ndash;&gt;-->
                </div><!--//tab-pane-->
            </div><!--//tab-content-->
        </div>
    </div>

<div class="overlay" id="overlay" style="display: none;"></div>
<form method="post" action="/Accounts/update" >
    <div class="popup row gy-4" id="popup" style="display: none;">
        <div class="app-card-footer p-2-2 mt-auto">
            <a class="my-css-a">用户信息修改</a>
        </div>
        <div>
            <div>
                <label class="form-label"><strong>username</strong></label>
                <input class="form-control" id="userid" name="userid" readonly="readonly"/>

                <label class="form-label"><strong>email</strong></label>
                <input class="form-control" id="email" name="email"/>
            </div>
            <div>
                <label class="form-label"><strong>firstName</strong></label>
                <input class="form-control" id="firstname" name="firstname"/>

                <label class="form-label"><strong>lastName</strong></label>
                <input class="form-control" id="lastname" name="lastname"/>
            </div>
            <div>
                <label class="form-label"><strong>status</strong></label>
                <input class="form-control" id="status" name="status"/>

                <label class="form-label"><strong>address1</strong></label>
                <input class="form-control" id="addr1" name="addr1"/>
            </div>
            <div>
                <label class="form-label"><strong>address2</strong></label>
                <input class="form-control" id="addr2" name="addr2"/>

                <label class="form-label"><strong>city</strong></label>
                <input class="form-control" id="city" name="city"/>
            </div>
            <div>
                <label class="form-label"><strong>state</strong></label>
                <input class="form-control" id="state" name="state"/>

                <label class="form-label"><strong>zip</strong></label>
                <input class="form-control" id="zip" name="zip"/>
            </div>
            <div>
                <label class="form-label"><strong>country</strong></label>
                <input class="form-control" id="country" name="country"/>

                <label class="form-label"><strong>phoneNumber</strong></label>
                <input class="form-control" id="phone" name="phone"/>
            </div>
        </div>
        <span class="my-css-card">
        <div class="app-card-footer p-4 mt-auto">
            <button type="submit" class="btn app-btn-primary" onclick="hidePopup()">保存所有信息</button>
            <button class="btn app-btn-secondary" type="button" onclick="hidePopup()" href="">取消</button>
        </div>
        </span>
    </div>
</form>
<script src="/myplugs/js/floating_window.js"> </script>
</body>
</html>